<script setup>
import { onMounted } from 'vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
gsap.registerPlugin(ScrollToPlugin, ScrollTrigger)
onMounted(() => {
  // new Array(6).fill(1).forEach((item, i) => {
  //   ScrollTrigger.create({
  //     trigger: '.box' + (i + 1),
  //     start: 'top top',
  //     end: '100% top',
  //     pin: true,
  //     pinSpacing: false
  //   })
  // })
  ScrollTrigger.create({
    trigger: '.box2',
    start: 'top top',
    end: '100px top',
    pin: '.box3',
    markers: true
  })
})
const goStep = () => {
  gsap.set('.box1', { x: 200 })
}
</script>

<template>
  <div class="text-white scroll-el">
    <div class="box1 w-[100%] h-[300px] bg-[#666]" @click="goStep">1</div>
    <div class="box2 w-[100%] h-[200px] bg-[#000]">2</div>
    <div class="box3 w-[100%] h-[500px] bg-[#333]">3</div>
    <div class="box4 w-[100%] h-[300px] bg-[green]">4</div>
    <div class="box5 w-[100%] h-[400px] bg-[red]">5</div>
    <div class="box6 w-[100%] h-[300px] bg-[yellow]">6</div>
  </div>
</template>
